<template>
<h2>会员信息显示</h2>
登录名称<input type="text" v-model="MLname"/>
真实名称<input type="text" v-model="MIname"/>
会员状态
<select v-model.number="MIstate">
    <option value="-1">请选择</option>
    <option value="0">禁用</option>
    <option value="1">启用</option>
</select>
<input type="button" value="查询" @click="LoadData" class="btn btn-success" />

    <table class="table table-bordered" border="1">
        <thead>
            <tr>
            <td>会员编号</td>
            <td>登录名称</td>
            <td>真实姓名</td>
            <td>联系方式</td>
            <td>充值金额</td>
            <td>出生日期</td>
            <td>家庭住宅</td>
            <td>会员头像</td>
            <td>会员状态</td>
            <td>会员类型</td>
        </tr>
        </thead>
        <tbody>
            <tr v-for="item in info" :key="item.ML_Id">
            <td>{{ item.ML_Id }}</td>
            <td>{{ item.ML_Name }}</td>
            <td>{{item.MI_Name}}</td>
            <td>{{item.MI_Phone}}</td>
            <td>{{ item.MI_Money.toFixed(2) }}</td>
            <td>{{ item.MI_Date.substring(0,10) }}</td>
            <td>{{item.MI_Address}}</td>
            <td><img style="width:50px;height:50px;" :src="item.MI_Img" /></td>
            <td>{{ item.MI_State ==0?"禁用":"启用"}}</td>
            <td>{{item.MT_Name}}</td>
            <td>
                <a href="#" @click="DeleteMemberInfo(item.ML_Id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>

</template>

<script setup lang="ts">
    import{ref,onMounted} from 'vue'
    import axios from 'axios'
    //删除会员信息方法
    const DeleteMemberInfo=(ML_Id:string)=>{
        if(confirm('确定删除吗'))
        {
            axios.delete('https://localhost:7120/api/Member/DeleteMember',
            {
                params:{
                    ML_Id:ML_Id
                }
            })
            .then(res=>{
                if(res.data>0)
                {
                    alert('删除成功');
                }
                else
                {
                    alert('删除失败');
                }
            })
            .catch(error=>{
                console.log(error);
            })
        }
    }



    //创建响应式数据
    //const info=ref()
    const info=ref([{
        "ML_Id": "",
    "ML_Name": "",
    "ML_Pwd": "",
    "MI_Name": "",
    "MI_Phone": "",
    "MI_Money": 0,
    "MI_Date": "",
    "MI_IdCard": "",
    "MI_Address": "",
    "MI_Img": "",
    "MI_Sex": "",
    "MI_State": 0,
    "MT_Name": ""
    }])
    //创建响应式数据，完成数据查询
    const MLname=ref("");
    const MIname=ref("");
    const MIstate=ref(-1);

    //创建生命周期函数钩
    onMounted(()=>{
        LoadData();
    })

    const LoadData=()=>{
       
        axios.get('https://localhost:44320/api/Member/InfoShow',{
            params:{
                MLname:MLname.value,
                MIname:MIname.value,
                MIstate:MIstate.value
            }
        })
        .then(res=>{
            console.log(res.data);
            info.value=res.data;
        })
        .catch(error=>{
            console.log(error);
        })
    }


</script>